﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Vue.js 入门练习</title>
    <link href="../css/demo.css" rel="stylesheet" />
    <meta charset="utf-8" />
</head>
<body>
    <div style="float:left;" class="form-group">
        <a href="vue.html">vue.html</a><br />
        <a href="vue-component.html">vue-component.html</a>
    </div>

    <div>
        <h2 style="">Vue.js 模板语法</h2>
        <code>数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值</code>
    </div>

    <div id="app">
        <h2 style="">Vue.js的常用指令</h2>
        <code>
            v-if,v-show,v-else,v-for,v-bind,v-on
        </code>

        <fieldset>
            <legend>v-if + v-else + v-show</legend>
            <span style="color:palevioletred;font-size:14px;">1. v-else元素必须立即跟在v-if元素后面.</span>
            <span style="color:palevioletred;font-size:14px;">2. v-if和v-show效果是一样的,只不过v-show始终都会被渲染到页面上,只是加上了display:none;这里就不做演示了.</span>
            <span style="color:palevioletred;font-size:14px;">3. v-if和v-show里面可以写正常的判断表达式.</span>

            <span v-show="name.indexOf('jack') >= 0">Name:{{name}}</span>
            <span v-if="age >= 25">Age:{{age}}</span>
            <span v-else>Age:1</span>
            <input type="text" v-model="age" />
        </fieldset>

        <fieldset>
            <legend>v-for   语法:v-for="item in items"</legend>
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>sex</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="person in people">
                        <td>{{person.name}}</td>
                        <td>{{person.age}}</td>
                        <td width="100">{{person.sex}}</td>
                    </tr>
                </tbody>
            </table>
        </fieldset>

        <fieldset>
            <legend>v-bind   语法:v-bind:argument="expression"    注:缩写:argument="expression"</legend>

            <ul class="pagination">
                <li v-for="n in pageCount">
                    <a href="#" v-bind:class="activeNumber === n ? 'active' : ''">{{n}}</a>
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>v-on   语法类似 v-bind  v-on:eventName="expression"     注:缩写:@eventName="expression"</legend>

            <input type="button" value="greet" v-on:click="greet" />
            <input type="button" value="say" v-on:click="say('Hi')" />
        </fieldset>

        <fieldset>
            <legend>综合小实例</legend>

            <div class="form-group">
                <label>Name:</label>
                <input type="text" v-model="newPerson.name" />
            </div>
            <div class="form-group">
                <label>Age:</label>
                <input type="text" v-model="newPerson.age" />
            </div>
            <div class="form-group">
                <label>Sex:</label>
                <select v-model="newPerson.sex">
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
            </div>
            <div class="form-group">
                <label></label>
                <input type="button" value="Create" @click="createPerson" />
            </div>

            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>sex</th>
                        <th>delete</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="person in people">
                        <td>{{person.name}}</td>
                        <td>{{person.age}}</td>
                        <td>{{person.sex}}</td>
                        <td width="100" class="text-center"><input type="button" value="Delete" @click="deletePerson($index)" /></td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
    </div>
    <script src="../script/vue/vue 2.0.js"></script>
    <script>

        new Vue({
            el: '#app',
            data: {
                //v-if,v-show,v-else
                message: 'hello world',
                yes: false,
                no: true,
                age: 26,
                name: 'jack',

                //v-for
                people: [{
                    name: 'Jack',
                    age: 30,
                    sex: 'Male'
                }, {
                    name: 'Bill',
                    age: 26,
                    sex: 'Male'
                }, {
                    name: 'Tracy',
                    age: 22,
                    sex: 'Female'
                }, {
                    name: 'Chris',
                    age: 36,
                    sex: 'Male'
                }],

                //v-bind
                activeNumber: 1,
                pageCount: 10,

                //综合小示例
                newPerson: {
                    name: '',
                    age: 0,
                    sex: 'Male'
                }
            },

            //v-on
            methods: {
                greet: function () {
                    // // 方法内 `this` 指向 vm
                    alert(this.message)
                },
                say: function (msg) {
                    alert(msg)
                },
                createPerson: function () {
                    this.people.push(this.newPerson);
                    this.newPerson = {
                        name: '',
                        age: 0,
                        sex: 'Male'
                    };
                },
                deletePerson: function (index) {
                    this.people.splice(index, 1);
                }
            }
        });

    </script>
</body>
</html>
